<template>
  <div>
    {{ myName }}
    <button @click="handleClick">click</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      myName: "moumoumou",
    };
  },
  methods: {
    handleClick() {
      this.myName = "1111111111111111111";
    },
  },
  beforeCreate() {
    console.log("beforeCreate" + this.myName);
  },
  created() {
    console.log("created" + "初始化工作" + this.myName);
  },
  beforeMount() {
    this.myName = this.myName + "2222222222222222222";
    console.log("beforeMount" + "dom挂载之前的");
  },
  mounted() {
    console.log(
      "mounted",
      "dom挂载完成了,访问dom",
      "监听事件",
      "ajax",
      "设置定时器"
    );
  },
  beforeUpdate() {
    console.log("beforeUpdate");
  },
  updated() {
    console.log("updated", "获取到更新后的dom");
  },
  beforeDestroy() {
    console.log("beforeDestroy");
  },
  destroyed() {
    console.log("destroyed");
  },
};
</script>

<style></style>
